<template>
  <div class="industry-matrix">
    <!-- 左侧 -->
    <div class="matrix-left">
      <div class="matrix-left-img">
        <img @click="openTag" src="~img/jz-tips.png" alt="" />
        <el-button
          type="primary"
          size="small"
          class="buttonExp"
          icon="el-icon-download"
          @click="importExcel"
        >
        </el-button>
        <!--        <div class="card-head" style="border: 1px solid red" @click="importExcel" >导出</div>-->
      </div>

      <!-- <el-table
        :data="leftData"
        :cell-style="getLeftStyle"
        :span-method="objectSpanMethod"
        :show-header="false"
        border
        style="width: 100%;"
      >
        <el-table-column
          prop="type"
          label=""
          width = "27px"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label=""
        >
        </el-table-column>
      </el-table> -->

      <div class="up-class">
        <div class="up-left-up">上游</div>
        <div class="up-class-right">
          <el-table
            :data="leftDataUp"
            :cell-style="getLeftStyle"
            :show-header="false"
            border
            style="width: 100%"
          >
            <el-table-column prop="cpxf" label=""> </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="up-class">
        <div class="up-left-mid">中游</div>
        <div class="up-class-right">
          <el-table
            :data="leftDataMid"
            :cell-style="getLeftStyle"
            :show-header="false"
            border
            style="width: 100%"
          >
            <el-table-column prop="cpxf" label=""> </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="up-class">
        <div class="up-left-down">下游</div>
        <div class="up-class-right">
          <el-table
            :data="leftDataDown"
            :cell-style="getLeftStyle"
            :show-header="false"
            border
            style="width: 100%"
          >
            <el-table-column prop="cpxf" label=""> </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- <div></div>
      <div></div> -->
    </div>
    <!-- 右侧 -->
    <el-table
      :data="testData"
      :cell-style="getCellStyle"
      :header-cell-style="headerStyle"
      @header-click="tableHeader"
      border
      style="width: 100%"
    >
      <el-table-column
        :prop="item.key"
        :label="item.name"
        v-for="(item, index) in rightTops"
        :key="index"
        show-overflow-tooltip="true"
      >
        <!-- <template slot-scope="scope">
          <div>
            {{ scope.row[item.key].toFixed(2) }}
          </div>
        </template> -->
      </el-table-column>
    </el-table>
    <!-- 标签弹框 -->
    <TagModal v-if="showTag" ref="TagModal" @changeCole="changeCole"></TagModal>
    <cyjzPop ref="cyjzPop"></cyjzPop>
  </div>
</template>
<script>
import TagModal from "./TagModal.vue";
import cyjzPop from "./cyjzPop.vue";
import { getIndustrialChainNew } from "@/api/screen/cyjz";

export default {
  name: "",
  /*1. Vue扩展 */
  extends: "", // extends和mixins都扩展逻辑，需要重点放前面
  mixins: [],
  components: { TagModal, cyjzPop },
  /* 2. Vue数据 */
  props: {
    dropName: {
      type: String,
    },
  },
  childrenList: [],
  model: { prop: "", event: "" }, // model 会使用到 props
  data() {
    return {
      // 暂时写死 后续需动态获取
      // dropName: "电子信息产业",
      headerStyle: {
        background: "#0E1A68",
        "font-size": "18px",
        "font-weight": "600",
        color: "#96E2FE",
        "text-align": "center",
        border: "none",
        height: "46px !important",
        padding: "0",
      },
      upList: [
        "电子专用材料",
        "电磁屏蔽材料",
        "光电材料",
        "磁性材料",
        "半导体材料",
        "电介质材料",
        "金属导电材料",
        "电子陶瓷材料",
      ],
      upList1: [
        "主动元件",
        "电子真空器件",
        "半导体分立器件",
        "显示器件",
        "集成电路制造",
        "光电子器件",
        "半导体照明器件",
        "被动元件",
        "电感器",
        "谐振器",
        "电阻器",
        "滤波器",
        "电容器",
      ],
      upList2: ["军工电子", "LED照明"],
      rightTopsRegion: [
        {
          name: "企业总数",
          key: "qys",
        },
        {
          name: "商业汇票贴现总金额",
          key: "comDiscount",
        },
        {
          name: "融资金额",
          key: "loanNumBalance",
        },
        {
          name: "大型企业占比",
          key: "dxRatio",
        },
        {
          name: "中型企业占比",
          key: "zxRatio",
        },
        {
          name: "小微型企业占比",
          key: "xwRatio",
        },
        {
          name: "社保人数",
          key: "sbPersonCount",
        },
        {
          name: "公积金人数",
          key: "gjjPersonCount",
        },
        {
          name: "税收总额",
          key: "taxAmount",
        },
      ],
      rightTops: [
        {
          name: "企业总数",
          key: "qys",
        },
        {
          name: "商业汇票贴现总金额",
          key: "comDiscount",
        },
        {
          name: "融资金额",
          key: "loanNumBalance",
        },
        {
          name: "大型企业占比",
          key: "dxRatio",
        },
        {
          name: "中型企业占比",
          key: "zxRatio",
        },
        {
          name: "小微型企业占比",
          key: "xwRatio",
        },
        {
          name: "社保人数",
          key: "sbPersonCount",
        },
        {
          name: "公积金人数",
          key: "gjjPersonCount",
        },
        {
          name: "税收总额",
          key: "taxAmount",
        },
      ],
      testData: [],
      testData2: [
        {
          key1: "5123",
          key2: "12333",
          key3: "123",
          key4: "1233",
          key5: "51233",
          key6: "1233",
          key7: "123",
          key8: "123",
          key9: "123",
          type: "上游",
          name: "电子专用材料",
        },
        {
          key1: "5123",
          key2: "12333",
          key3: "800",
          key4: "1233",
          key5: "51233",
          key6: "1233",
          key7: "123",
          key8: "123",
          key9: "123",
          type: "上游",
          name: "电磁屏蔽材料",
        },
        {
          key1: "5123",
          key2: "12333",
          key3: "123",
          key4: "1233",
          key5: "51233",
          key6: "1233",
          key7: "123",
          key8: "123",
          key9: "123",
          type: "上游",
          name: "光电材料",
        },
        {
          key1: "5123",
          key2: "12333",
          key3: "123",
          key4: "800",
          key5: "800",
          key6: "1233",
          key7: "123",
          key8: "123",
          key9: "123",
          type: "上游",
          name: "磁性材料",
        },
        {
          key1: "5123",
          key2: "12333",
          key3: "123",
          key4: "1233",
          key5: "51233",
          key6: "1233",
          key7: "123",
          key8: "123",
          key9: "123",
          type: "上游",
          name: "半导体材料",
        },
        {
          key1: "5123",
          key2: "12333",
          key3: "123",
          key4: "1233",
          key5: "51233",
          key6: "1233",
          key7: "800",
          key8: "800",
          key9: "123",
          type: "上游",
          name: "电介质材料",
        },
        {
          key1: "5123",
          key2: "12333",
          key3: "123",
          key4: "800",
          key5: "51233",
          key6: "1233",
          key7: "123",
          key8: "123",
          key9: "123",
          type: "上游",
          name: "金属导电材料",
        },
        {
          key1: "5123",
          key2: "12333",
          key3: "123",
          key4: "1233",
          key5: "51233",
          key6: "1233",
          key7: "123",
          key8: "123",
          key9: "123",
          type: "上游",
          name: "电子陶瓷材料",
        },
        {
          key1: "5123",
          key2: "12333",
          key3: "123",
          key4: "1233",
          key5: "51233",
          key6: "1233",
          key7: "123",
          key8: "123",
          key9: "123",
          type: "中游",
          name: "主动元件",
        },
        {
          key1: "5123",
          key2: "12333",
          key3: "123",
          key4: "800",
          key5: "800",
          key6: "800",
          key7: "123",
          key8: "123",
          key9: "123",
          type: "中游",
          name: "电子真空器件",
        },
        {
          key1: "5123",
          key2: "12333",
          key3: "123",
          key4: "1233",
          key5: "51233",
          key6: "1233",
          key7: "123",
          key8: "123",
          key9: "123",
          type: "中游",
          name: "半导体分立器件",
        },
        {
          key1: "5123",
          key2: "12333",
          key3: "800",
          key4: "800",
          key5: "800",
          key6: "1233",
          key7: "123",
          key8: "123",
          key9: "123",
          type: "下游",
          name: "军工电子",
        },
        {
          key1: "5123",
          key2: "12333",
          key3: "800",
          key4: "1233",
          key5: "51233",
          key6: "1233",
          key7: "123",
          key8: "123",
          key9: "123",
          type: "下游",
          name: "LED照明",
        },
      ],
      leftDataUp: [],
      leftDataMid: [],
      leftDataDown: [],
      showTag: false,
    };
  },
  computed: {},
  watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
  /* 3. Vue资源 */
  filters: {},
  directives: {},
  /* 4. Vue生命周期 */
  created() {
    this.getCyjz();
  },
  mounted() {
    // debugger;
    // // 获取上、中、下游左侧标题
    // this.leftDataUp = this.testData.filter(pre => pre.cpcc === '上游')
    // this.leftDataMid = this.testData.filter(pre => pre.cpcc === '中游')
    // this.leftDataDown = this.testData.filter(pre => pre.cpcc === '下游')
  },
  destroy() {},
  /* 5. Vue方法 */
  methods: {
    tableHeader(arg1, arg2) {
      console.log(arg1, arg2);
      console.log(this.testData, "表格数据");
      let yList = [];
      let xList = [];
      let dataList = [];
      this.testData.forEach((element) => {
        yList.push(element.cpxf);
        xList.push(element[arg1.property]);
        dataList.push({
          name: element.cpxf,
          value: element[arg1.property],
        });
      });
      console.log(dataList, "处理后的表格");
      this.$refs.cyjzPop.details(dataList);
    },

    importExcel() {
      const a = this.rightTops;
      const b = this.testData;
      // 获取b的第一笔数据的所有属性
      const keys = Object.keys(b[0]);
      // 获取a的所有key
      const aKeys = a.map((item) => item.key);
      //获取b中不包含a的key
      const diffKeys = keys.filter((item) => !aKeys.includes(item));
      //去除 diffKeys 中的 'lx','cpcc','cpmc','cpxf'
      if (diffKeys.includes("lx")) {
        diffKeys.splice(diffKeys.indexOf("lx"), 1);
      }
      if (diffKeys.includes("cpcc")) {
        diffKeys.splice(diffKeys.indexOf("cpcc"), 1);
      }
      if (diffKeys.includes("cpmc")) {
        diffKeys.splice(diffKeys.indexOf("cpmc"), 1);
      }
      if (diffKeys.includes("cpxf")) {
        diffKeys.splice(diffKeys.indexOf("cpxf"), 1);
      }

      const result = b.map((obj) => {
        const newObj = {
          lx: obj.lx,
          cpcc: obj.cpcc,
          cpmc: obj.cpmc,
          cpxf: obj.cpxf,
        };
        a.forEach((prop) => {
          // if (obj[prop.key] !== undefined) {
          newObj[prop.key] = obj[prop.key];
          // }
        });
        return newObj;
      });
      let data = JSON.stringify(result);
      let para = {};
      para.hideCol = diffKeys;
      para.dataStr = data;
      this.download(
        "/industry/dnIndex/export",
        {
          ...para,
        },
        `导出产业大脑_产业矩阵导出${new Date().getTime()}.xlsx`
      );
      console.log(result);
    },
    changeCole(val, list) {
      this.childrenList = list;
      if (val && val.length > 0) {
        this.rightTops = val;
      } else {
        this.rightTops = this.rightTopsRegion;
      }
      console.log(this.rightTops, "表格数据");
      this.showTag = false;
    },
    groupAndSortData(data) {
      // 分组
      let groups = data.reduce((acc, cur) => {
        let key = cur.cpcc + "-" + cur.cpmc;
        if (!acc[key]) {
          acc[key] = [];
        }
        acc[key].push(cur);
        return acc;
      }, {});
      // 排序
      let result = [];
      for (let key in groups) {
        let arr = groups[key];
        arr.sort((a, b) => {
          if (a.cpmc === a.cpxf) {
            return -1;
          } else if (b.cpmc === b.cpxf) {
            return 1;
          } else {
            return 0;
          }
        });
        result = result.concat(arr);
      }
      return result;
    },

    async getCyjz() {
      let params = {};
      params.lx = this.dropName;
      const res = await getIndustrialChainNew(params);
      if (res.code == 200) {
        let data1 = res.data;
        console.log(data1, "data1data1data1");
        this.testData = data1;
        this.leftDataUp = this.testData.filter((pre) => pre.cpcc === "上游");
        this.leftDataUp = this.groupAndSortData(this.leftDataUp);

        this.leftDataMid = this.testData.filter((pre) => pre.cpcc === "中游");
        this.leftDataMid = this.groupAndSortData(this.leftDataMid);

        this.leftDataDown = this.testData.filter((pre) => pre.cpcc === "下游");
        this.leftDataDown = this.groupAndSortData(this.leftDataDown);

        //leftDataDown根据cpmc分组
        let leftDataDownGroup = {};
        this.leftDataDown.forEach((item) => {
          if (!leftDataDownGroup[item.cpmc]) {
            leftDataDownGroup[item.cpmc] = [];
          }
          leftDataDownGroup[item.cpmc].push(item);
        });
        // 然后将cpmc和cpxf相同的放到数组的最前面
        this.leftDataDown = [];
        for (let key in leftDataDownGroup) {
          let arr = leftDataDownGroup[key];
          arr.forEach((item, index) => {
            if (item.cpmc === item.cpxf) {
              arr.splice(index, 1);
              arr.unshift(item);
            }
          });
          this.leftDataDown = this.leftDataDown.concat(arr);
        }
        this.testData = this.leftDataUp
          .concat(this.leftDataMid)
          .concat(this.leftDataDown);
      }
    },

    getCellStyle({ row, column, rowIndex, columnIndex }) {
      // 获取当前列的key
      const key = column.property;
      // 获取当前的单元格的值
      const value = row[column.property];
      // 获取当前列的区间
      const list = this.testData.map((val) => val[key]);
      // let styleObj = {}
      let styleObj = {
        background: this.generateGradientColor(value, columnIndex, list),
        "font-size": "18px",
        "font-family": "Alibaba PuHuiTi",
        "font-weight": "400",
        color: "#FDFEFF",
        "border-color": "rgba(44, 44, 44, 0.1)",
        "text-align": "center",
        height: "29px !important",
        padding: "0",
      };
      return styleObj;
    },
    getLeftStyle({ row, column, rowIndex, columnIndex }) {
      let styleObj = {};
      if (row.type === "上游") {
        styleObj = {
          "border-color": "#1F55C3",
          background: "#00246A",
          height: "29px",
          padding: "0",
          color: "#FFF4D4",
          "font-size": "16px",
        };
      } else if (row.type === "中游") {
        styleObj = {
          "border-color": "#1F55C3",
          background: "#00246A",
          height: "29px",
          padding: "0",
          color: "#ABA9FE",
          "font-size": "16px",
        };
      } else {
        styleObj = {
          "border-color": "#1F55C3",
          background: "#00246A",
          height: "29px",
          padding: "0",
          color: "#D7F4FE",
          "font-size": "16px",
        };
      }
      return styleObj;
    },
    openTag() {
      this.showTag = true;
      let that = this;
      this.$nextTick(() => {
        // this.$refs.TagModal.hasSelectList = this.rightTops;
        this.$refs.TagModal.defaultCheck(that.childrenList);
      });
    },
    generateGradientColor(number, columnIndex, list) {
      const minColor = [155, 205, 233];
      const maxColor = [50, 54, 132];
      const colorList = [
        "rgba(223,43,34,0.8)",
        "rgba(239,168,60,0.8)",
        "rgba(209,203,52,0.8)",
        "rgba(78,140,68,0.8)",
        "rgba(59,92,216,0.8)",
        "rgba(207,122,120,0.8)",
        "rgba(182,136,88,0.8)",
        "rgba(145,66,158,0.8)",
        "rgba(72,156,205,0.8)",
      ];
      //不存在最大最小值
      if (Math.max(...list) === Math.min(...list)) {
        return colorList[columnIndex];
      }
      // 存在最大最小值
      const normalizedValue =
        (number - Math.min(...list)) / (Math.max(...list) - Math.min(...list));
      const interpolatedColor = minColor.map((color, index) =>
        Math.round(color + normalizedValue * (maxColor[index] - color))
      );

      return `linear-gradient(to right, rgb(${interpolatedColor.join(",")}), ${
        colorList[columnIndex]
      })`;
    },
  },
};
</script>
<style scoped lang="scss">
.industry-matrix {
  // border: 0.5px solid rgba(44, 44, 44, 0.5);
  // height: 100%;
  display: flex;

  .matrix-left {
    width: 200px;
    // border: 1px solid red;

    .matrix-left-img {
      height: 46px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;

      img {
        width: 148px;
        height: 35px;
      }
    }

    .up-class {
      display: flex;

      // border: 1px solid red;
      .up-left-up {
        // padding-top: 80px;
        display: flex;
        align-items: center;
        width: 27px;
        // height: 234px;
        background: rgba(181, 151, 88, 0.7);
        opacity: 0.7;
        text-align: center;
        font-size: 18px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        color: rgba(14, 26, 104, 1);
      }

      .up-left-mid {
        // padding-top: 80px;
        display: flex;
        align-items: center;
        width: 27px;
        // height: 234px;
        background: rgba(107, 104, 229, 0.7);
        opacity: 0.7;
        text-align: center;
        font-size: 18px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        color: rgba(14, 26, 104, 1);
      }

      .up-left-down {
        // padding-top: 80px;
        display: flex;
        align-items: center;
        width: 27px;
        // height: 234px;
        background: rgba(121, 191, 215, 0.7);
        opacity: 0.7;
        text-align: center;
        font-size: 18px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        color: rgba(14, 26, 104, 1);
      }

      .up-class-right {
        flex: 1;
      }

      .up-right-item {
        height: 29px;
        // background: #1F55C3;
        font-size: 16px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        color: #fef4d7;
        border-top: 0.5px solid #1f55c3;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;

        &:first-of-type {
          // border-top: none;
        }
      }
    }
  }
}

::v-deep .el-table {
  background-color: transparent !important;
}

::v-deep .el-table--group,
.el-table--border {
  border: none !important;
}

::v-deep .el-table::before,
.el-table--group::after,
.el-table--border::after {
  background-color: transparent !important;
}

.buttonExp {
  border-radius: 40%;
  margin-left: 2px;
  background-color: #409eff;
}
</style>
